import React, { Component } from 'react';
import "./App.css"
class App extends Component {
  state = {
    msg: "(^OO^)"
  };
  handleClick = (params) => {
    this.setState({
      msg: "(%^_^%)"
    })
  }; 
  getSnapshotBeforeUpdate(props,state){
    // 计算值 
    return 200;
  }
  // 主件挂载到dom书上
//   componentDidMount(){
// document.getElementById("outerBox").scrollTop = 100;
//   }
// 主件更新完之后调用生命周期
componentDidUpdate(props,state,snapshot){
  document.getElementById("outerBox").scrollTop = snapshot;
};
  render() {
    return (
      <div className="outerBox" id="outerBox">
        <div className="innerBox">
          <h1>{this.state.msg}</h1>
          <button onClick={this.handleClick}>更新视图</button>
        </div>
      </div>

    );
  }
}

export default App;
